<template>

  <div>

    <sky-panel title="金额千分位">
      <template #header>
        <span>此处使用element-plus的输入框测试</span>
      </template>
      <template #main>

        <div>
          <el-input
            v-model.trim="form.money"
            v-thousands.money="form"
            placeholder="请输入内容"
          />

        </div>

      </template>
    </sky-panel>

    <sky-panel title="比例百分位">
      <template #header>
        <span>此处使用element-plus的输入框测试</span>
      </template>
      <template #main>

        <div>
          <el-input
            v-model.trim="form.rate"
            v-rate.rate="form"
            placeholder="请输入内容"
          />
        </div>

      </template>
    </sky-panel>

    <sky-panel title="输入校验">
      <template #header>
        <span>自定义输入校验方法传入</span>
      </template>
      <template #main>

        <div>
          <el-input
            v-model.trim="form.number"
            v-verify="check"
            placeholder="请输入数字"
          />
        </div>

      </template>
    </sky-panel>

    <sky-panel title="提交防抖">
      <template #header>
        <span>连续点击只会触发一次</span>
      </template>
      <template #main>

        {{ number }}
        <el-button v-debounce="debounceClick" type="primary">提交</el-button>

      </template>
    </sky-panel>

  </div>

</template>

<script lang="ts">

import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      form: {
        money: 2222222,
        rate: 0.7,
        number: 6
      },
      number: 0
    }
  },
  methods: {
    debounceClick() {
      this.number++
    },
    check(val: any) {
      console.log('当前输入的值', val)
      return '校验后返回正确值'
    }
  }
})
</script>

<style scoped>

</style>
